<div ref:root>

  <LazyImage 
    {src}
    alt="class activation atlas"
  />

  <svg viewBox="0 0 500 500">
  {#each ticks as i}
    <line x2={500} y1={500 * i / gridSize} y2={500 * i / gridSize} stroke="black" stroke-opacity="0.15" stroke-dasharray="2,2"/>
  {/each}
  
  {#each ticks as i}
    <line y2={500} x1={500 * i / gridSize} x2={500 * i / gridSize} stroke="black" stroke-opacity="0.15" stroke-dasharray="2,2"/>
  {/each}
  </svg>

  {#each configData as cell}
    <div class="label" style="position: absolute; height: {100 / gridSize}%; width: {100 / gridSize}%;left: {(cell.y) / gridSize * 100}%; top: {(cell.x) / gridSize * 100}%;">
      <div title="{$inceptionLabels[cell.i[0]]}">{$inceptionLabels[cell.i[0]]}</div>
    </div>
  {/each}

</div>

<script>
  import {range} from "d3-array";
  import { default as load } from '../library/load.js';

  export default {
    components: {
      LazyImage: '../library/LazyImage.html'
    },
    data() {
      return {
        w: 500,
        filterType: "winner",
        classFilter: 62,
        gridSize: 8,
        configData: [],
        showAttribution: false
      }
    },
    computed: {
      cellSize: ({w, gridSize}) => w / gridSize,
      root: ({filterType}) => `https://storage.googleapis.com/distill-2019-activation-atlas/build/class_filter_inceptionv1_${filterType}/`,
      ticks: ({gridSize}) => range(1, gridSize),
      config: ({root, classFilter, gridSize, filterType}) => `${root}web/web--grid_size=${gridSize}--layout=20_0.02_cosine--class_filter=${classFilter}_${filterType}--filter=None--layer=mixed5b--model=InceptionV1--sample_images=1000000--sample_type=random.json`,
      src: ({root, classFilter, gridSize, filterType}) => `${root}render/render--x=0--y=0--tries=3--alpha=False--tile_size=8--whiten=true--steps=1056--icon_size=80--grid_size=${gridSize}--layout=20_0.02_cosine--class_filter=${classFilter}_${filterType}--filter=None--layer=mixed5b--model=InceptionV1--sample_images=1000000--sample_type=random.jpg`
    },
    onupdate({ changed, current, previous }) {
      if (current.showAttribution && changed.config) {
        this.set({configData: []});
        load(current.config).then(response => {
          this.set({configData: response});
        })
      }
    }
  }
 </script>

 <style>
  ref:root {
    position: relative;
  }
  ref:root > * {
    position: absolute;
    top: 0;
    left: 0;
  }
  .label > div {
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 4px;
    box-sizing: border-box;
    font-size: 9px;
    text-shadow: 0 0 5px black;
    line-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    color: white;
  }
  svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
 </style>